	.container {
		padding: 0 28rpx;
		padding-bottom: 24rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);

		.head-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding: 12rpx 0;
			margin-bottom: 24rpx;
		}

		.main-img {
			margin: 12rpx 0;
		}
	}


	.subsection {
		display: flex;
		padding: 0 84rpx;
		justify-content: space-between;
	}

	.subsection1,
	.subsection2,
	.subsection3,
	.subsection4 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240rpx;
		line-height: 64rpx;
		border-radius: 50rpx;
		transition: background-color 0.3s;
		background-color: #f5f5f5;
		color: #333;
		margin-left: 48rpx；
	}

	.subsection1.active,
	.subsection2.active,
	.subsection3.active,
	.subsection4.active {
		background-color: rgb(72, 137, 252);
		color: #fff;
	}

	.grid {
		background-color: #fff;
		padding: 0 24rpx;

		.grid-container {
			display: flex;
			align-items: flex-end;

			.grid-text {
				width: 60%;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				margin-top: 28rpx;
				color: #333;
				font-weight: bold;

				.grid-text2 {
					margin: 0 2rpx 0 16rpx;
				}

				.grid-text3 {
					color: rgb(186, 186, 186)
				}
			}

			.grid-value {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.grid-value1 {
					display: flex;
					font-size: 30rpx;
					color: rgb(95, 203, 227);
					font-weight: bold;
				}

				.grid-value2 {
					margin-top: 12rpx;
					margin-bottom: 16rpx;
					font-size: 24rpx;
					color: rgb(166, 166, 166);
				}
			}

		}

	}